<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="admin__field" css="element.setClasses(element)">
    <label if="element.label" class="admin__field-label" attr="for: element.uid">
        <span text="element.label"/>
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <table class="admin__dynamic-rows admin__control-collapsible" data-role="grid" attr="'data-index': index">

            <thead if="element.columnsHeader">
            <tr data-bind="foreach: {data: labels, as: 'label'}">
                <th text="label.config.label"
                    css="$parent.setClasses(label.config)">
                </th>
            </tr>
            </thead>

            <tbody data-bind="foreach: elems">
            <tr class="data-row" data-bind="foreach: {data: elems, as: 'elem'}">
                <td css="$parents[1].setClasses(elem)" if="elem.template">
                    <div class="fieldset-wrapper admin__collapsible-block-wrapper"
                         collapsible="openClass: '_show', closeOnOuter: false, opened: elem.opened()">
                        <div class="fieldset-wrapper-title" toggleCollapsible>

                            <div class="admin__collapsible-title" data-role="collapsible-title">
                                <render args="name: $parents[1].dndConfig.template, data: $parents[1].dnd"
                                        if="$parents[1].dndConfig.enabled" />

                                <span text="$parent.getLabel(elem)" />
                            </div>

                            <button class="action-delete"
                                    type="button"
                                    title="'Delete'"
                                    click="function(){
                                            $parents[1].deleteRecord($parent.index, $parent.recordId)
                                        }">
                                <span text="'Delete'"/>
                            </button>
                        </div>

                        <div class="admin__collapsible-content"
                             css="{_show: $collapsible.opened()}"
                             data-role="collapsible-content"
                             template="elem.template"></div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="admin__control-table-action" if="element.addButton">
            <button attr="{disabled: disabled}"
                    type="button"
                    click="addChild.bind($data, false, false)">
                <span text="addButtonLabel"/>
            </button>
        </div>
    </div>
</div>
